<template>
  <el-form class="sc-list-filter" label-width="100px" :model="form" inline>
    <template v-if="col">
      <div class="sc-list-filter-col-wrap">
        <div class="sc-list-filter-col-items">
          <el-row>
            <template v-for="(item, key) in form">
              <el-col :key="key" :xl="8" :lg="12" :sm="24" :xs="24">
                <ListFilterItem :obj="item" :obj-key="key" col @change="changeItem" @search="handleSearch" />
              </el-col>
            </template>
            <el-form-item>
              <div class="searchButton">
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                <el-button icon="el-icon-refresh" class="boxOne" style="color: #586aa6; background-color: #fff; border-color: #ccc" @click="handleReset">重置</el-button>
                <slot name="searchButtons"></slot>
              </div>
            </el-form-item>
          </el-row>
        </div>
      </div>
    </template>
    <template v-else>
      <template v-for="(item, key) in form">
        <ListFilterItem :key="key" :obj="item" :obj-key="key" @change="changeItem" />
      </template>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        <el-button icon="el-icon-refresh" class="boxOne" style="color: #586aa6; background-color: #fff; border-color: #ccc" @click="handleReset">重置</el-button>
      </el-form-item>
    </template>
  </el-form>
</template>

<script>
import { mapGetters } from 'vuex'
import ListFilterItem from './components/ListFilterItem'
export default {
  components: { ListFilterItem },
  props: {
    keyList: {
      type: Array,
      default() {
        return []
      }
    },
    form: {
      type: Object,
      default() {
        return {}
      }
    },
    col: {
      type: Boolean,
      default() {
        return true
      }
    }
  },
  data() {
    return {
      changeValue: {},
      // 保留员工管理选择的部门
      departmentValue: 0
    }
  },
  computed: {
    ...mapGetters(['attendanceDate'])
  },
  watch: {
    form: {
      deep: true,
      handler: function (newValue) {
        this.$store.dispatch('user/setFormValue', this.form)
        // 是否选择了下拉框
        if (newValue) {
          if (this.departmentValue === 0) {
            if (newValue.departmentId) {
              this.departmentValue = newValue.departmentId.value
            } else {
              this.departmentValue = 0
            }
            if (newValue.DepartmentId) {
              this.departmentValue = newValue.DepartmentId.value
            } else {
              this.departmentValue = 0
            }
            return
          } else {
            if (newValue.departmentId) {
              // 判断下拉框数据是否和保存的数据一致
              if (newValue.departmentId.value !== this.departmentValue) {
                this.$store.dispatch('user/setDepartmentValue', { name: 'departmentId', value: newValue.departmentId.value })
              }
            }
            if (newValue.DepartmentId) {
              if (newValue.DepartmentId.value !== this.departmentValue) {
                this.$store.dispatch('user/setDepartmentValue', { name: 'DepartmentId', value: newValue.DepartmentId.value })
              }
            }
          }
        }
      }
    }
  },
  methods: {
    changeItem(obj) {
      const { key, val } = obj
      this.form[key].value = val
      this.$emit('changItemHandler', obj, this.form)
    },
    handleSearch() {
      // 初始化对象
      const tmpObj = {
        pageIndex: 1,
        pageSize: 10,
        search: []
      }

      let indx = 0
      let keyValue = null
      // const aryList = [];
      const priorities = []

      if (this.keyList.length > 0) {
        this._.forEach(this.form, (item, key) => {
          if (key === 'keyword') {
            // 获得关键字的值
            keyValue = item.value
          } else {
            if (item.type === 'date' || item.type === 'dateonly') {
              let timeKeyOne = ''
              let timeKeyTwo = ''
              if (item.arr) {
                if (item.arr.length === 2) {
                  timeKeyOne = item.arr[0]
                  timeKeyTwo = item.arr[1]
                }
              }
              if (item.value !== undefined && item.value[0]) {
                tmpObj.search.push({
                  key: timeKeyOne,
                  value: item.value[0],
                  operation: 4,
                  sequence: indx,
                  relationship: 0
                })
                indx++
              }
              if (item.value !== undefined && item.value[1]) {
                tmpObj.search.push({
                  key: timeKeyTwo,
                  value: item.value[1],
                  operation: 5,
                  sequence: indx,
                  relationship: 0
                })
                indx++
              }
            } else {
              if (key === 'baseStation.area.id' && item.value) {
                const arr = item.arr
                let flagSwaich = false
                arr.forEach((base) => {
                  if (item.value === base.value && base.isForGate) {
                    flagSwaich = true
                  }
                })
                if (flagSwaich) {
                  tmpObj.search.push({
                    key: 'autoGate.area.id',
                    value: item.value,
                    operation: 0,
                    sequence: indx,
                    relationship: 1
                  })
                  indx++
                } else {
                  tmpObj.search.push({
                    key: key,
                    value: item.value,
                    operation: 0,
                    sequence: indx,
                    relationship: 0
                  })
                  indx++
                }
                return
              }
              // 考前统计姓名查询需要operation等于6
              if (item.value) {
                // 获得非关键字数组
                tmpObj.search.push({
                  key: key,
                  value: item.value,
                  operation: 6,
                  sequence: indx,
                  relationship: 0
                })
                indx++
              }
            }
            // if (item.value) {
            //   // 获得非关键字数组
            //   tmpObj.search.push({
            //     key: key,
            //     value: item.value,
            //     operation: 0,
            //     sequence: indx,
            //     relationship: 0
            //   })
            //   indx++
            // }
          }
        })
        if (keyValue) {
          // 获得关键字数组
          this.keyList.forEach((el, index) => {
            priorities.push({
              key: el,
              value: keyValue,
              operation: 6,
              sequence: index,
              relationship: 1
            })
          })
        }
        // 判断非关键子数组是否有值
        if (tmpObj.search.length) {
          // 如果有值  判断是否需要关键字查询
          if (keyValue) {
            tmpObj.search[tmpObj.search.length - 1].priorities = priorities
          }
        } else {
          // 判断是否需要关键字查询
          if (keyValue) {
            tmpObj.search = priorities
          }
        }
      } else {
        // 获取表单内的值
        this._.forEach(this.form, (item, key) => {
          if (item.type === 'date' || item.type === 'dateonly') {
            let timeKeyOne = ''
            let timeKeyTwo = ''
            if (item.arr) {
              if (item.arr.length === 2) {
                timeKeyOne = item.arr[0]
                timeKeyTwo = item.arr[1]
              }
            }
            if (item !== undefined && item.value !== undefined && item.value[0]) {
              tmpObj.search.push({
                key: timeKeyOne,
                value: item.value[0],
                operation: 4,
                sequence: indx,
                relationship: 0
              })
              indx++
            }
            if (item !== undefined && item.value !== undefined && item.value[1]) {
              tmpObj.search.push({
                key: timeKeyTwo,
                value: item.value[1],
                operation: 5,
                sequence: indx,
                relationship: 0
              })
              indx++
            }
          } else {
            if (item.value) {
              tmpObj.search.push({
                key: key,
                value: item.value,
                operation: 6,
                sequence: indx,
                relationship: 0
              })
              indx++
            }
          }
        })
      }

      if (tmpObj.search.length) {
        if (tmpObj.search[0].relationship) {
          delete tmpObj.search[0].relationship
        }
        if (tmpObj.search.length === 1) {
          delete tmpObj.search[0].sequence
        }
      }
      // 提交事件
      this.$emit('search', tmpObj)
    },
    async handleReset() {
      await this.$store.dispatch('user/setChangeValue')
      this.$router.push({ query: {}})
      const tmpObj =
        this.attendanceDate && this.attendanceDate.status
          ? {
            pageIndex: 1,
            pageSize: 10,
            orderBy: 'createdTime',
            orderByAscent: false,
            EnterTimeStart: this.attendanceDate.EnterTimeStart,
            EnterTimeEnd: this.attendanceDate.EnterTimeEnd
          }
          : {
            pageIndex: 1,
            pageSize: 10,
            orderBy: 'createdTime',
            orderByAscent: false
          }
      await this.$store.dispatch('user/setPageData', { pageIndex: tmpObj.pageIndex, pageSize: tmpObj.pageSize })
      this._.forEach(this.form, (item) => {
        item.value = ''
      })
      this.$emit('reset', tmpObj)
    }
  }
}
</script>

<style lang="scss" scoped>
  .searchButton {
    margin-top: 20px;
  }
  .boxOne:focus,
  .boxOne:focus:hover {
    color: #586aa6 !important;
  }
</style>
